/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

// -------------------------------------
// Colors guideline page
// -------------------------------------
.guidelineColor__palette {
  padding: $ouiSize;
  padding-bottom: $ouiSizeXL;
}

.guidelineColor__swatch {
  height: $ouiSizeM;
  width: $ouiSizeM;
  border-radius: 50%;
}

.guidelineColor__stripe {
  height: $ouiSizeL;
  line-height: $ouiSizeL;
}

.guidelineColor__test {
  text-align: center;
  font-size: $ouiFontSizeS;
}

// sass-lint:disable no-important
.guidelineColor__title {
  color: $ouiColorMediumShade !important;
}

.guideColorPalette__swatch {
  span {
    height: $ouiSize;
    width: $ouiSizeL;
  }

  &--small span {
    width: auto;
    height: $ouiSizeS;
  }
}

.guideColorPalette__swatchHolder {
  border-radius: $ouiBorderRadius;
  overflow: hidden;
}

// -------------------------------------
// Sass guideline page
// -------------------------------------
.guideSass__swatchItem + .guideSass__swatchItem {
  margin-top: $ouiSize;
}

.guideSass__swatch {
  height: $ouiSizeL;
  width: $ouiSizeL;
}

.guideSass__swatch--danger {
  background: $ouiColorDanger;
}

.guideSass__swatch--dangerTint {
  background: tint($ouiColorDanger, 30%);
}

.guideSass__swatch--dangerShade {
  background: shade($ouiColorDanger, 30%);
}

// sass-lint:disable no-color-literals
.guideSass__swatch--primaryLight {
  background: #0079A5;
}

// sass-lint:disable no-color-literals
.guideSass__swatch--primaryDark {
  background: #4DA1C0;
}

.guideSass__levelRow {
  padding-left: $ouiSizeS;
}

.guideSass__levelRow + .guideSass__levelRow {
  margin-top: $ouiSizeS;
}

.guideSass__level {
  background-color: $ouiColorMediumShade;
  transform: scaleY(.5) rotate(30deg) skew(-30deg, 0deg);
  width: $ouiSize;
  height: $ouiSize;
}

.guideSass__sizeRow + .guideSass__sizeRow {
  margin-top: $ouiSize;
}

.guideSass__size {
  background-color: $ouiColorFullShade;
  display: inline-block;
}

.guideSass__sizeItem {
  width: $ouiSizeXXL;
  text-align: right;
}

.guideSass__fontSizeExample + .guideSass__fontSizeExample {
  margin-top: $ouiSizeL;
}

.guideSass__fontSize {
  margin-bottom: $ouiSizeS;
}

.guideSass__fontSize--ouiFontSizeXS {
  @include ouiFontSizeXS;
}

.guideSass__fontSize--ouiFontSizeS {
  @include ouiFontSizeS;
}

.guideSass__fontSize--ouiFontSizeM {
  @include ouiFontSizeM;
}

.guideSass__fontSize--ouiFontSize {
  @include ouiFontSize;
}

.guideSass__fontSize--ouiFontSizeL {
  @include ouiFontSizeL;
}

.guideSass__fontSize--ouiFontSizeXL {
  @include ouiFontSizeXL;
}

.guideSass__fontSize--ouiFontSizeXXL {
  @include ouiFontSizeXL;
}

.guideSass__shadow {
  padding: $ouiSizeXXL;
  background: $ouiColorEmptyShade;
  border-radius: $ouiBorderRadius;

  & + .guideSass__shadow {
    margin-top: $ouiSizeXL;
  }
}

.colorGuidelines_colorPreviewTooLight rect {
  stroke: transparentize($ouiColorLightShade, lightOrDarkTheme(.5, 0));
  stroke-width: .25px;
}

.guideSass__shadow--ouiSlightShadow { @include ouiSlightShadow; }
.guideSass__shadow--ouiBottomShadowSmall { @include ouiBottomShadowSmall; }
.guideSass__shadow--ouiBottomShadowMedium { @include ouiBottomShadowMedium; }
.guideSass__shadow--ouiBottomShadowFlat { @include ouiBottomShadowFlat; }
.guideSass__shadow--ouiBottomShadow { @include ouiBottomShadow; }
.guideSass__shadow--ouiBottomShadowLarge { @include ouiBottomShadowLarge; }

.guideSass__overflowShadows {
  overflow-y: hidden;
  height: 200px;

  .guideSass__overflowShadowText {
    @include ouiYScrollWithShadows;
    padding: $ouiSizeS;
  }
}

.guideSass__overflowShadowsX {
  @include ouiXScrollWithShadows;
  padding: $ouiSizeS $ouiSizeS 0;

  .guideSass__overflowShadowTextX {
    width: 150%;
  }
}

.guideSass__shadow--color {
  @include ouiBottomShadowLarge(desaturate($ouiColorPrimary, 30%));
}

.guideSass__border {
  display: flex;
  padding: $ouiSize;
}

.guideSass__border--radius {
  border: $ouiBorderThin;
  border-radius: $ouiBorderRadius;
}

.guideSass__border--radiusSmall {
  border: $ouiBorderThin;
  border-radius: $ouiBorderRadiusSmall;
}

.guideSass__border--ouiBorderThin {
  border: $ouiBorderThin;
}

.guideSass__border--ouiBorderThick {
  border: $ouiBorderThick;
}

.guideSass__border--ouiBorderEditable {
  border: $ouiBorderEditable;
}

.guideSass__fontFamily {
  font-size: $ouiSizeL;
  background: $ouiColorDarkestShade;
  text-align: center;
  width: $ouiSizeXL * 2;
  height: $ouiSizeXL;
  line-height: $ouiSizeXL;
  color: $ouiColorEmptyShade;

  &--code {
    @include ouiCodeFont;
  }
}

.guideSass__animRow + .guideSass__animRow {
  margin-top: $ouiSizeL;
}

.guideSass__animParent {
  background: $ouiColorLightestShade;
  height: $ouiSize;
  margin-top: $ouiSizeS;
  position: relative;
}

.guideSass__animChild {
  width: $ouiSize;
  height: $ouiSize;
  background: $ouiColorDarkestShade;
  position: absolute;
  left: 0;
}

.guideSass__animRow:hover .guideSass__animChild {
  transition-property: left;
  transition-timing-function: linear;
  left: calc(100% - #{$ouiSize});
}

.guideSass__animRow--ouiAnimSpeedExtraFast:hover .guideSass__animChild {
  transition-duration: $ouiAnimSpeedExtraFast;
}

.guideSass__animRow--ouiAnimSpeedFast:hover .guideSass__animChild {
  transition-duration: $ouiAnimSpeedFast;
}

.guideSass__animRow--ouiAnimSpeedNormal:hover .guideSass__animChild {
  transition-duration: $ouiAnimSpeedNormal;
}

.guideSass__animRow--ouiAnimSpeedSlow:hover .guideSass__animChild {
  transition-duration: $ouiAnimSpeedSlow;
}

.guideSass__animRow--ouiAnimSpeedExtraSlow:hover .guideSass__animChild {
  transition-duration: $ouiAnimSpeedExtraSlow;
}

.guideSass__animRow--ouiAnimSlightBounce:hover .guideSass__animChild {
  transition-timing-function: $ouiAnimSlightBounce;
  transition-duration: $ouiAnimSpeedSlow;
}

.guideSass__animRow--ouiAnimSlightResistance:hover .guideSass__animChild {
  transition-timing-function: $ouiAnimSlightResistance;
  transition-duration: $ouiAnimSpeedSlow;
}

.guideSass__breakpointExample {
  padding: $ouiSize;
  color: $ouiColorGhost;
}

.guideSass__themedBox {
  padding: $ouiSize;
  border-left: $ouiBorderThick;
}

// sass-lint:disable no-color-literals
.guideSass__themedBox--light {
  border-color: #0079A5;
  background: tint(#0079A5, 90%);
  color: #333;
}

.guideSass__themedBox--dark {
  // sass-lint:disable no-color-literals
  border-color: #4DA1C0;
  background: shade(#4DA1C0, 70%);
  color: #FFF;
}

.guideSass__contrastExample {
  $backgroundColor: tintOrShade($ouiColorWarning, 90%, 70%);

  background: $backgroundColor;
  color: makeHighContrastColor($ouiColorWarning, $backgroundColor);
  padding: $ouiSize;
  border-left: $ouiBorderThick;
  border-color: $ouiColorWarning;

  .square {
    fill: makeGraphicContrastColor($ouiColorWarning, $backgroundColor);
    vertical-align: bottom;
  }
}

.guideSection__emptyBox {
  background-color: $ouiColorEmptyShade;
}

@import 'colors/color_section';

@include ouiBreakpoint('xl') {
  .guideSass__breakpointExample {
    background: $ouiColorPrimary;

    &:before {
      content: 'You are currently in the xl breakpoint';
    }
  }
}

@include ouiBreakpoint('l') {
  .guideSass__breakpointExample {
    background: $ouiColorSecondary;

    &:before {
      content: 'You are currently in the l breakpoint';
    }
  }
}

@include ouiBreakpoint('m') {
  .guideSass__breakpointExample {
    background: $ouiColorAccent;

    &:before {
      content: 'You are currently in the m breakpoint';
    }
  }
}

@include ouiBreakpoint('s') {
  .guideSass__breakpointExample {
    background: $ouiColorWarning;

    &:before {
      content: 'You are currently in the s breakpoint';
    }
  }
}

@include ouiBreakpoint('xs') {
  .guideSass__breakpointExample {
    background: $ouiColorDanger;

    &:before {
      content: 'You are currently in the xs breakpoint';
    }
  }
}
